body{
    margin: 0;
    padding: 0;
}
.main {
    width: 630px;
    height: 630px;

    #map {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: url("../image/map.jpg") no-repeat;
        .cell {
            position: absolute;
            width: 70px;
            height: 70px;
            -webkit-transition: all linear 200ms;
            &.diamond {
                background: url("../image/ruong.png") no-repeat center;
            }
            &.player {
                background: url("../image/headplayer1.png") no-repeat top center / 90%;
                z-index: 10;
            }
            &.boom {
                background: url("../image/headplayer1.png") no-repeat center;
            }
            &.shield {
                background: url("../image/headplayer1.png") no-repeat center;
            }
            &.weapons {
                background: url("../image/headplayer1.png") no-repeat center;
            }
            &.mana {
                background: url("../image/headplayer1.png") no-repeat center;
            }
            &.blood {
                background: url("../image/headplayer1.png") no-repeat center;
            }
        }
    }
    .btn {
        position: relative;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        top: calc((630px-50px)/2);
        z-index: 10;
        display: block;
    }
}